import { makeLine, mapYearToLandscapeZ } from '@src/utils/utils'

/**
 * 初始化场景与相机
 */
export default function mixinLanes(Incident) {
  Incident.prototype.createLanes = function() {
    var lineGeometry = new THREE.Geometry()
    for (var i = 0; i <= 1500; i += 5) {
      lineGeometry.vertices.push(new THREE.Vector3( 0, 0, -i ))
    }

    var timelineGeometry = new THREE.Geometry()
    timelineGeometry.vertices.push(new THREE.Vector3( -1, 0, 0 ))
    timelineGeometry.vertices.push(new THREE.Vector3( 1, 0, 0 ))

    var lineMaterial = new THREE.LineBasicMaterial({ color: 0xCCCCCC, fog: true })

    // 短线
    var lanes = new THREE.Object3D()
    // 长线
    var lines = new THREE.Object3D()
    // 分割器
    var dividers = new THREE.Object3D()
    // 线状平面
    var linesPlane = new THREE.Mesh(
      new THREE.PlaneBufferGeometry(144, 144),
      new THREE.MeshBasicMaterial({ color: 0xff00ff })
    )

    // 双面渲染
    linesPlane.material.side = THREE.DoubleSide
    linesPlane.position.y = 0
    linesPlane.position.z = 10
    //linesPlane.rotation.x = Math.PI/2;
    linesPlane.visible = false
    lines.add(linesPlane)

    lanes.dividers = dividers
    lanes.add(dividers)
    lanes.linesPlane = linesPlane

    lines.position.z = 1000

    // geographies： 地理位置
    var itemLanes = this.geographies.category.length

    // 年份几何体
    var yearTickGeometry = new THREE.Geometry()

    var lastYearZ = null

    var thisYear = new Date().getFullYear() + 10
    var years = []

    for (var _year = 1800; _year <= thisYear; _year++) {
      years.push(_year)
    }

    for (var i = 0; i< years.length; i++) {
      var year = years[i]
      var z = mapYearToLandscapeZ(year)
      console.log(year, z)

      var lineContainer = new THREE.Object3D()
      var line = makeLine( timelineGeometry, lineMaterial )
      line.scale.set(30, 1, 1)
      lineContainer.position.set( 0, -12, z )
      lineContainer.add(line)
      dividers.add(lineContainer)

      var textCanvas = document.createElement('canvas')
      textCanvas.width = 256
      textCanvas.height = 32

      var ctx = textCanvas.getContext('2d')
      ctx.font = 'bold 30px Lato, Arial'
      ctx.fillStyle = '#FFFFFF'
      // ctx.fillText((year > 0) ? 'AD ' + year : ((year < 0) ? (year <= -10e3 ? formatNumber(-year) : -year) + ' BC' : 'BC / AD'), 2, 28)
      ctx.fillText(year + '年', 2, 28)

      var tex = new THREE.Texture(textCanvas)
      tex.needsUpdate = true

      var mat = this.canvasShaderMaterial.clone()
      var color = new THREE.Color(0xFFFFFF)
      mat.uniforms = {
        map: {type: 't', value: tex},
        color: {type: 'v3', value: new THREE.Vector3(color.r, color.g, color.b)}
      }

      var text = new THREE.Mesh( new THREE.PlaneBufferGeometry(textCanvas.width/25, textCanvas.height/25), mat )
      text.position.set( -30+5, -1, 0 )

      lineContainer.add(text)

      // 小分割 分为 10 份
      if (lastYearZ !== null) {
        for (var j = 0; j <= 12; j++) {
          var f = (j / 12)
          var tickZ = (1 - f) * lastYearZ + f * z
          /**
           * vertices: 定点
           * 第五个 -> 会长一点
           */
          yearTickGeometry.vertices.push(
            new THREE.Vector3(-18, -12, tickZ),
            new THREE.Vector3(-18 + (j===6 ? -2 : -1), -12, tickZ),
            new THREE.Vector3(-18, -12, tickZ)
          )
        }
      }

      lastYearZ = z
    }

    // 年份
    for (var i = 0; i < itemLanes; i++) {
      var line = makeLine( lineGeometry, lineMaterial )
      // line.position.set( (6/5)*6*(i-(itemLanes-1)/2)-(6/5)*3,  -10,  0 );
      line.position.set( (6 / 5) * 6 * (i - (itemLanes - 1) / 2) - (6 / 5) * 3,  -10,  0 )
      lines.add(line)
    }

    // 感觉是搞错了
    /*var line = makeLine( lineGeometry, lineMaterial );
    line.position.set( (6 / 5) * 6 * (i - (itemLanes - 1) / 2) - (6 / 5) * 3,  -10,  0 );
    lines.add(line);*/

    var yearTicks = makeLine(yearTickGeometry, lineMaterial)
    lanes.add(yearTicks)

    lanes.add(lines)
    lanes.lines = lines

    return lanes
  }
}
